<template>
    <YvRow>
        <YvRow class="musicImage" :span="25" align="left">
            <YvRow :span="4" :sm="20" align="center" class="musicPlayParentPlayer">
                <YvCol class="musicPlayer">
                </YvCol>
            </YvRow>
            <YvRow :span="3" :sm="15" align="center" class="musicPlayParentIcon">
                <YvCol class="musicIcon">
                </YvCol>
            </YvRow>
        </YvRow>
        <source>
        </source>
    </YvRow>
</template>

<script>
// import jsmt from jsmediatags
const musicMetadata = require('music-metadata-browser')
export default {
    name: "musicPlayer",
    data() {
        return {

        }
    },
    created() {

    },
    method: {

    }
}
</script>

<style type="scope">
.musicImage {
    justify-content: left;
    align-items: center;
}

.musicPlayer {
    height: 0;
    padding-bottom: 100%;
    background-image: repeating-conic-gradient(rgb(68, 54, 54), rgb(112, 112, 109), rgb(68, 54, 54));
    border-radius: 50%;
    margin-right: -100%;
}

.musicIcon {
    height: 0;
    padding-bottom: 100%;
    background: rgb(211, 132, 132);
    border-radius: 50%;
    margin-left: -100%;
}
</style>